<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试报名</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'GradeList' }"
            >选择考试级别</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'CheckEnroll' }"
            >选择考试项目</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ enrollData.title }} </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="enroll_detail_content">
        <el-row type="flex">
          <el-col :span="24">
            <div class="enroll_detail_top">
              <div class="enroll_detail_top_left">
                <div class="enroll_detail_top_title">
                  {{ enrollData.title }}
                </div>
                <div
                  class="enroll_detail_top_item"
                  style="align-items: flex-end"
                >
                  <div class="enroll_detail_top_item_name">费用：</div>
                  <div class="enroll_detail_top_item_money">
                    {{ enrollData.exam_money }}
                  </div>
                </div>
                <div class="enroll_detail_top_item">
                  <div class="enroll_detail_top_item_name">考点：</div>
                  <div class="enroll_detail_top_item_value">
                    {{ enrollData.area_name }}
                  </div>
                </div>
                <div class="enroll_detail_top_item">
                  <div class="enroll_detail_top_item_name">地点：</div>
                  <div class="enroll_detail_top_item_value">
                    {{ enrollData.place }}
                  </div>
                </div>
                <div class="enroll_detail_top_item">
                  <div class="enroll_detail_top_item_name">地址：</div>
                  <div class="enroll_detail_top_item_value">
                    {{ enrollData.address }}
                  </div>
                  <i
                    @click="openMapFn()"
                    class="el-icon-location-information"
                    style="
                      font-size: 20px;
                      color: #e71432;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                  ></i>
                </div>
                <div class="enroll_detail_top_item">
                  <div class="enroll_detail_top_item_name">时间：</div>
                  <div class="enroll_detail_top_item_value">
                    {{ enrollData.exam_date }}
                  </div>
                </div>
                <el-button
                  type="danger"
                  style="width: 118px; margin-top: 26px"
                  @click="checkEnroll()"
                  v-if="enrollData.enroll_status == 2"
                  >报名</el-button
                >
                <el-button
                  type="info"
                  style="width: 118px; margin-top: 26px"
                  v-if="enrollData.enroll_status == 1"
                  >未开启</el-button
                >
                <el-button
                  type="info"
                  style="width: 118px; margin-top: 26px"
                  v-if="enrollData.enroll_status == 3"
                  >已结束</el-button
                >
                <el-button
                  type="info"
                  style="width: 118px; margin-top: 26px"
                  v-if="
                    enrollData.enroll_status == 2 &&
                    enrollData.remain_count == 0
                  "
                  >名额已满</el-button
                >
              </div>
              <div class="enroll_detail_img_box">
                <img
                  class="enroll_detail_img"
                  :src="baseAPIUrl + enrollData.image_path"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-tabs class="enroll_Detail_tab_box" v-model="activeName">
              <el-tab-pane
                label="须知"
                class="enroll_Detail_tab"
                name="notice"
                v-html="enrollData.notice"
                v-if="enrollData.notice != ''"
              ></el-tab-pane>
              <el-tab-pane
                label="简介"
                class="enroll_Detail_tab"
                name="detail"
                v-html="enrollData.detail"
                v-if="enrollData.detail != ''"
              ></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <!-- 添加考生弹框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="dialogClose"
    >
      <div style="width: 100%; height: 500px">
        <baidu-map
          class="map-wrap"
          style="width: 100%; height: 100%"
          :center="mapData.center"
          :zoom="mapData.zoom"
          :scroll-wheel-zoom="true"
          @ready="mapHandler"
        >
          <bm-marker :position="mapData.center" :dragging="false"> </bm-marker>
        </baidu-map>
      </div>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/enroll/enrollDetail.css" scoped></style>

<script>
export default {
  name: "EnrollDetail",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      enrollId: "", // 当前活动id
      enrollData: {
        address: "",
        area_name: "",
        detail: "",
        exam_date: "",
        exam_level: 0,
        exam_money: "",
        image_path: "",
        notice: "",
        place: "",
        title: "",
      }, // 报名数据
      activeName: "notice",
      dialogVisible: false,
      businessDetail: {}, //商家信息(包含坐标信息)
      mapData: {
        center: { lng: 0, lat: 0 }, //中心坐标
        zoom: 17, //缩放级别
      }, //地图数据
      BMap: null, //BMap类
      map: null, //地图对象
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    let enrollId = this.$route.params.enrollId;
    if (enrollId != undefined && enrollId != "") {
      this.$store.commit("set_watchEnrollId", enrollId);
      this.enrollId = enrollId;
    } else {
      this.enrollId = this.$store.state.watchEnrollId;
    }
    this.getDataFn();
  },
  methods: {
    // 打开地图
    openMapFn: function () {
      this.dialogVisible = true;
    },
    // 关闭弹窗
    dialogClose: function () {
      this.dialogVisible = false;
    },
    // 查询详情数据
    getDataFn: function () {
      let that = this;
      let url = "/mobile/examDetail";
      let data = {
        exam_id: this.enrollId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.enrollData = response.exam_info;
            let locationData = {
              lng: Number(response.exam_info.longitude),
              lat: Number(response.exam_info.latitude),
            };
            that.mapData.center = locationData;
            if (that.enrollData.notice == "") {
              that.activeName = "detail";
            }
            if (that.enrollData.detail == "") {
              that.activeName = "notice";
            }
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 选择报名
    checkEnroll: function () {
      this.$store.commit("set_examineeInforList", {});
      this.$router.push({
        name: "AddUserInforList",
        params: {
          enrollId: this.enrollId,
        },
      });
    },
    //地图预处理
    mapHandler: async function ({ BMap, map }) {
      if (this.businessId) {
        //可以在此处请求接口获取坐标数据
        await this.getMallBusinessDetail();
      }
      //保存百度地图类
      this.BMap = BMap;
      //保存地图对象
      this.map = map;
      //如果一开始坐标存在(编辑的时候)
      if (this.businessDetail.longitude && this.businessDetail.latitude) {
        //设置坐标
        this.mapData.center.lng = this.businessDetail.longitude;
        this.mapData.center.lat = this.businessDetail.latitude;
      }
      // else {
      //   //如果坐标不存在则动态获取当前浏览器坐标（创建的时候）
      //   let geolocation = new BMap.Geolocation();
      //   //获取当前的坐标（使用promise 将异步转换为同步）
      //   await new Promise((resolve) => {
      //     geolocation.getCurrentPosition((r) => {
      //       this.mapData.center.lng = this.businessDetail.longitude =
      //         r.point.lng;
      //       this.mapData.center.lat = this.businessDetail.latitude =
      //         r.point.lat;
      //       resolve();
      //     });
      //   });
      // }
      //创建定位标记
      let marker = new BMap.Marker(
        new BMap.Point(
          this.businessDetail.longitude,
          this.businessDetail.latitude
        )
      );
      //将标记添加到地图上
      map.addOverlay(marker);
    },
    //在地图上选择区域
    getLocation: function (e) {
      //设置经度
      this.businessDetail.longitude = e.point.lng;
      //设置纬度
      this.businessDetail.latitude = e.point.lat;
      //百度地图类
      let BMapGL = this.BMap;
      //地图对象
      let map = this.map;
      //清除地图上所有的覆盖物(保证每次点击只有一个标记)
      map.clearOverlays();
      //创建定位标记
      let marker = new BMapGL.Marker(
        new BMapGL.Point(e.point.lng, e.point.lat)
      );
      //将标记添加到地图上
      map.addOverlay(marker);
      //创建坐标解析对象
      let geoc = new BMapGL.Geocoder();
      //解析当前的坐标成地址
      geoc.getLocation(e.point, (rs) => {
        //获取地址对象
        let addressComp = rs.addressComponents;
        //拼接出详细地址
        this.businessDetail.address =
          addressComp.province +
          addressComp.city +
          addressComp.district +
          addressComp.street +
          addressComp.streetNumber;
      });
    },
  },
};
</script>
